<template>
  <div>
    <component :is="borderData.name" v-bind="borderData.attr">
      <div v-if="layoutData.enabled" class="flex h-100% w-100% box-border">
        <div
          v-for="(cls, i) in layoutData.layoutClass"
          :key="cls + i"
          :class="cls"
        >
          <template v-for="(n, j) in layoutData.layoutContent[i]">
            <panel-page
              v-bind="getContentData(content[n])"
              :key="i + '-' + j"
            ></panel-page>
          </template>
        </div>
      </div>
      <template v-else>
        <div v-for="(d, i) in content" :key="i">
          <panel-page v-bind="getContentData(d)"></panel-page>
        </div>
      </template>
      <!-- <grid-layout :layout="layoutData"></grid-layout> -->
    </component>
  </div>
</template>

<script>
import { merge } from "lodash-es";
import { type } from "@/util/util";
import layout from "./layout.vue";
import panelPage from "./panelPage.vue";
export default {
  name: "box",
  components: { gridLayout: layout, panelPage },
  props: ["border", "layout", "name", "content", "title"],
  data: () => ({}),
  computed: {
    borderData() {
      const d = this.border || "";
      const t = type(d);
      let {
        name,
        text,
        attr: td = {},
        ...attr
      } = t === "string" ? { name: d } : { ...d };
      //
      if(typeof td === 'string' && /^[\{\[]/.test(td)){
        td = JSON.parse(td)
      }
      const da = {
        class: "w-100% h-100%",
      };
      //
      attr = { ...attr, ...td };
      return { name, text, attr: merge(da, attr) };
    },
    layoutData() {
      const ly = this.layout || {};
      const { v, l1, l2, l3, l1n = "", l2n = "", l3n = "" } = ly;
      let enabled = false;
      let lcs = [];
      let lcd = [];
      switch (v) {
        case "zero":
          enabled = false;
          break;
        case "two":
          lcs = [l1, l2];
          lcd = [l1n.split(","), l2n.split(",")];
          enabled = true;
          break;
        case "three":
          lcs = [l1, l2, l3];
          lcd = [l1n.split(","), l2n.split(","), l3n.split(",")];
          enabled = true;
          break;
      }
      // if()
      console.log(enabled, lcs, lcd);
      return { enabled, layoutClass: lcs, layoutContent: lcd };
    },
  },
  methods: {
    getContentData(d = {}) {
      const obj = {};
      for (const k of Object.keys(d)) {
        const v = d[k];
        if (typeof v === "string" && /^[\[\{]/.test(v)) {
          obj[k] = JSON.parse(v);
        } else {
          obj[k] = v;
        }
      }
      //
      const { name, type, border, title, ...attr } = obj;
      //
      console.log("..getContentData...",  d,attr);
      return { name:name || type, type, border, title, attr };
    },
  },
  created() {
    console.log(this.layoutData);
  },
};
</script>
